<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font:16px "微软雅黑";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式---去全部样式 */
				list-style-type: none;
				/* 左栏效果
				 1.左栏空间区域【aside】 235*450 背景颜色
				 2.左栏区域内容【li】 加权 235*50 相对定位【固定位置】
				 3.给每个区域内容【li】 加鼠标移动上去改背景颜色
				 */
				}
				aside{
					width: 235px;
					height: 450px;
					background: #ababba;
				}
				/* 无序列表：有样式---
				 去全部样式:list-style-type 去列表项样式
				           list-style-position 去列表项标记位置样式
						   list-style-imge  去列表项图片标记样式
						   */
			
			    aside ul.sidebar li{
			    width: 235px;
			    height: 50px;
				/* 相对定位--挂靠点 */
				position: relative;
				text-align: left;
				line-height: 50px;
				top: 15px;
				/* 内边距 */
				}
			   aside ul.sidebar li:hover{
				   background: #eee;
			   }
			   aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid red;
				position: absolute;
				left: 270px;
				/* 显示与隐藏 Javascript 【JQuery框架】 */
				display: block;
			   }
			   /* 新增样式 */
			   aside ul.sidebar li span{
				   border: 1px solid red;
				   float: right;
				   /* 间隙 内边距 */
				   padding-right: 50px;
				   
			   }
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标记】 aside元素 针对：左栏 广告，弹出效果....有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐，定义起名，冗余】
		 -->
		 <aside>
		<ul class="sidebar">
			<!-- 弹出框 -->
			<div class="out"></div>
			<li>手机 平板 电话卡<span>></span></li>
			<li>电视 盒子<span>></span></li>
            <li>路由器 智能硬件<span>></span></li>
			<li>移动电源 插线板<span>></span></li>
			<li>耳机 音箱<span>></span></li>
			<li>电池 储存卡<span>></span></li>
			<li>保护套 后盖<span>></span></li>
			<li>米兔 服装<span>></span></li>
			<li>其他周边<span>></span></li>
		</ul>	 
		</aside>
		<script>
			//左栏弹出与隐藏  .hover事件源+css函数
			//选择器
			$("aside ul.sidebar li").hover(function(){
				/*弹出框默认：隐藏---hover悬停第一件事：显示*/
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>、
<!-- 事件源  .hover()  切换效果与css悬停hover一致
                       -->